<template>
  <div class="fromBox">
    <el-form ref="form"  label-width="80px" class="elform">
      <el-form-item 
      :label="item.label" 
      class="formWidth" 
      v-for="(item , index) in headerFormList"
      :key="index"
      >
        <el-input v-model="item.name" v-if="item.formtype =='1'"></el-input>
        <el-select v-model="item.name" placeholder="请选择" v-if="item.formtype =='2'">
            <el-option
            v-for="item1 in item.optionList"
            :key="item1.value"
            :label="item1.label"
            :value="item1.value">
            </el-option>
        </el-select>
        <el-button type="primary" plain v-if="item.isBtn" @click="search(index)">查询</el-button>
      </el-form-item>

    </el-form>
    <slot name="rightbox"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods:{
    search(index){
      let _self = this;
      _self.$emit("search" , index)
    }
  },
  props:{
      headerFormList:{
          type:Array,
          default:()=>{
              return []
          }
      }
    //  isBtn必须有一个是true 
    // 如果是 2 下拉你要传下拉的数据放到该对象的optionList
  }
};
</script>
<style scoped>
.rightBox {
  width: 440px;
}
.rightBox .box {
  float: right;
}
.rightBox .box > div:nth-child(1) {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid red;
  text-align: center;
  line-height: 100px;
  margin: 20px;
  /* margin-bottom: 10px; */
  color: red;
  font-weight: bold;
}
.rightBox .box > div:nth-child(2) {
  text-align: center;
}
.el-input {
  width: 200px;
}
.leftList{
    height: 100%;
    margin: 10px 10px 30px 0;
    
}
.fromBox{
    display: flex;
}
.fromBox .elform{
    flex: 1;
}

.left{
    float: left;

}
.right{
    float: right;
}
.clear{
    clear: both;
}
</style>